<script>
import { defineComponent, computed, getCurrentInstance, ref } from "vue";
import { useCounterStore } from "../stores";
import { Search } from "@element-plus/icons-vue";
import { useRouter, useRoute } from "vue-router";
export default defineComponent({
  setup() {
    const store = useCounterStore();
    const router = useRouter();
    const route = useRoute();
    const nickName = ref("");
    const userName = ref("");
    const { proxy } = getCurrentInstance();
    const statuCounts = ref(store.statuCount);
    const isCollapse = computed(() => {
      return store.isCollapse;
    });
    const my = () => {
      router.push({ path: "/my", query: { userName: userName.value } });
    };
    const userDetail = () => {
      proxy.$http.get(`/system/user/get/${store.userName}`).then(res => {
        nickName.value = res.data[0].nickName;
        userName.value = res.data[0].userName;
      });
    };
    const foldHandle = () => {
      store.setIsCollapse(!isCollapse.value);
    };
    const home = () => {
      router.push({ path: "/homeMain" });
    };
    const declare = () => {
      router.push({ path: "/declare" });
    };
    const message = () => {
      router.push({ path: "/message" });
    };
    const quit = () => {
      (store.token = ""), sessionStorage.removeItem("token");
      sessionStorage.removeItem("userName");
      sessionStorage.removeItem("flag");
      sessionStorage.removeItem("userId");
      router.push({ path: "/login" });
    };
    userDetail();
    return {
      isCollapse,
      nickName,
      foldHandle,
      Search,
      my,
      home,
      declare,
      message,
      quit,
      statuCounts
    };
  }
});
</script>

<template>
  <el-menu :default-active="activeIndex" class="el-menu-demo header card-header" mode="horizontal">
    <div class="box">
      <el-icon color="#409EFC" size="25" @click="foldHandle()" class="hvr-shrink item">
        <component :is="isCollapse ? 'Expand' : 'Fold'" />
      </el-icon>
      <el-input class="hvr-grow item" size="small" placeholder="请输入任务或负责人名称" :prefix-icon="Search" />
    </div>
    <h3 class="hvr-bob" @click="home()">科加斯任务管理</h3>
    <div class="box">
      <el-menu-item index="3" class="hvr-underline-from-center" @click="declare()">
        <el-icon class="hvr-grow">
          <Warning />
        </el-icon>
      </el-menu-item>

      <el-menu-item index="4" class="hvr-underline-from-center" @click="message()">
        <el-icon class="hvr-grow">
          <el-badge :value="statuCounts" class="item">
            <Bell />
          </el-badge>
        </el-icon>
      </el-menu-item>

      <el-dropdown>
        <span class="hvr-grow">{{ nickName }}</span>
        <template #dropdown>
          <el-dropdown-menu>
            <el-dropdown-item @click="my()" class="hvr-grow">个人主页</el-dropdown-item>
            <el-dropdown-item @click="quit()" class="hvr-grow">退出</el-dropdown-item>
          </el-dropdown-menu>
        </template>
      </el-dropdown>
    </div>
  </el-menu>
</template>

<style scoped lang="less">
.header {
  border-bottom: 1px solid #c6c6c6;
  display: grid;
  grid-template-columns: repeat(auto-fit, 1fr);
  grid-auto-flow: column;
  gap: 2em;
  justify-content: space-between;
  align-items: center;
  padding: 0 10px;
  .box {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    align-items: center;
    margin-right: 15px;
  }
  .box .item {
    flex: 1;
  }
}

.el-input {
  width: 200px;
}

:deep(.el-input__wrapper) {
  background-color: transparent; /*覆盖原背景颜色，设置成透明 */
  border-radius: 95px;
  border: 0;
}
</style>
